<template>
  <span :class="style">{{ label }}</span>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";
import Dictionary from "@/lang/dict/dictionary";
import DictionaryProvider from "../provider/dictionary-provider";

/**
 * 数据字典
 *
 * 简单的文本转换，value 转换成 label。
 */
export default {
    name: "SeaDictionary"
    , props: {
        //值字段名
        value: {type: [String, Boolean, Number], default: ''}
        // 数据匹配方式：default（等值比较）、range（区间比较）
        , type: {type: String, default: 'default'}

        // 默认的标签：未匹配数据时候展示的文本
        , defaultLabel: {type: String, default: undefined}
        // 默认样式：未匹配数据时展示的样式
        , defaultClass: {type: String, default: ''}

        // 禁用样式：某些场景下，样式反而不利于布局，这时候可以禁用样式
        , disabledStyle: {type: Boolean, default: false}

        // 数据字典
        , options: {type: [Array, String], default: undefined}
        // 数据字典抓取函数
        , provider: {type: Function, default: DictionaryProvider}
    }
    , data() {
        return {
            // css样式
            style: ''
            // 标签值
            , label: undefined
            // 数据字典
            , dictionary: Dictionary.DEF
        }
    }
    , watch: {
        value: {
            handler: function () {
                this.match();
            }
        }
        , options: {
            handler: val => {
                this.setOption(val);
            }
        }
    }
    , mounted() {
        this.setOption(this.options);
    }
    , methods: {

        /**
         * 设置下拉选项
         *
         * @param val
         */
        setOption(val) {
            // 表格单元格内，会有重复加载的问题，不过数据字典是有缓存的，问题不大
            this.provider(val).then(dic => {
                this.dictionary = dic;
                this.match();
            }).catch(e => {
                this.dictionary = Dictionary.DEF;
                this.match();
                console.error(e);
            });
        },

        /**
         * 匹配数据字典
         */
        match: function () {
            if (Layers.isBlank(this.value)) {
                this.label = this.defaultLabel || '';
                this.style = '';
            } else {
                // match item
                let item = this.type === 'default'
                    ? this.dictionary.matchByValue(this.value, this.defaultLabel, this.defaultClass)
                    : this.dictionary.matchByRange(this.value, this.defaultLabel, this.defaultClass)

                this.label = item.label;
                this.style = item.style;
            }
        }
    }
}
</script>

